import React, {Component}      from 'react';
import BaseNavigationBar       from '../../views/BaseNavigationBar';
import {StyleSheet,View,Text,Image,Dimensions,FlatList,TouchableOpacity,ScrollView} from 'react-native';
import SpacingView from "../../views/SpacingView";
const {width,height} = Dimensions.get('window');
import ListItemDivider from '../../views/ListItemDivider.js';
import  LinearGradient           from 'react-native-linear-gradient';
import StorageUtil from "../../utils/StorageUtil";
import PlayGame from "../game/PlayGameScreen";
import BannerDetail from "../home/BannerDetailScreen";

export default class GameDetailScreen extends Component {

    popToBack(){
        // this.props.navigation.goBack()
        this.props.navigator.pop();
    }

    constructor(props) {
        super(props);
        this.state = {
          // gameItemData:this.props.navigation.state.params.gameItem,
            gameItemData:this.props.gameItem,
            ConfigStr:'',
            PlayGameStr:''
        };
    }

    //

    componentWillMount() {
       // console.log('游戏详情数据'+ this.props.navigation.state.params.gameItem+
       //     JSON.stringify(this.props.navigation.state.params.gameItem));

        StorageUtil.get('Config',(error,object)=>{
            if (!error && object != null)
            {
                // this.getGamesData(object.Config);
                console.log('哈哈哈结束句'+
                    object.Config + JSON.stringify(object.Config));
                // this.setState({ConfigStr:object.Config});

                var baseURL = this.state.gameItemData.gid +
                    '&config='+ JSON.stringify(object.Config);

                console.log('嘎嘎嘎嘎'+ JSON.stringify(baseURL));

                this.setState({PlayGameStr:baseURL});

            }else
            {
                console.log('打印数据');
            }
        });

    }

    goGameDetail(item){

        　console.log('点击游戏开始万' + item + JSON.stringify(item));

        this.props.navigator.push({component:PlayGame,
            params:{gameItem:item.gid+'&config='+this.state.ConfigStr}})

        // http://192.168.6.197:8901/bin/h5/index.html?p=xyhb&gid=10004&config={}

        // this.props.navigation.navigate("PlayGame",
        //     {gameItem:item.gid+'&config='+this.state.ConfigStr});
    }


    renderItem=({ item })=> {

        console.log('游戏详情数据'+ item + JSON.stringify(item));
        return (
            <TouchableOpacity activeOpacity={1} onPress={() => this.goGameDetail(item)}>
                <View style={styles.itemViewStyle}>
                    <Image source={{uri:item}} style={styles.imageStyle} />
                    {/*<Text style={styles.nameStyle} numberOfLines={2}>{item.name}</Text>*/}
                    {/*<Text style={styles.numberStyle}>{item.online}人在玩</Text>*/}
                </View>
            </TouchableOpacity>
        )
    }

     curtail(arr) {
        var m = arr.slice(0);
        m.shift();
        return m;
    }

    renderHeaderView(){
        return (
            <View style={styles.imageHeadViewStyle}>
                  <Image  style={styles.imageHeadStyle} source={{uri:this.state.gameItemData.imgs[0]}}/>
            </View>
        )
    }

    goPlayGame(){

        console.log('点击还收到回电话'+ this.state.ConfigStr);

        // this.props.navigation.navigate("PlayGame",
        //     {gameItem:this.state.PlayGameStr});

        this.props.navigator.push({component:PlayGame,params:{gameItem:this.state.PlayGameStr}})

    }


    render() {

        // console.log('数据详情事实上'+ this.state.gameItemData.imgs[0]);



        // var lists = ;


        return (
            <View style={styles.container}>
                <BaseNavigationBar
                    title={'游戏详情'}
                    leftImageSource={require('../../../images/other/ic_back.png')}
                    leftItemFunc={() => this.popToBack()}/>

                <ScrollView>

                    <View style={styles.imageHeadViewStyle}>
                        <Image  style={styles.imageHeadStyle} source={{uri:this.state.gameItemData.imgs[0]}}/>
                    </View>

                    <View style={styles.bgViewStyle}>
                        <FlatList
                            horizontal={true}
                            data={this.curtail(this.state.gameItemData.imgs)}
                            keyExtractor={(item, index) => index}
                            // ListHeaderComponent={this.renderHeaderView}
                            renderItem={this.renderItem}
                        />
                    </View>


                    <View style={{width:width, height:5,backgroundColor:'#d8d8d8'}}/>

                    <View style={styles.titleViewStyle}>
                        <Text style={styles.titleStyle}>详情介绍</Text>
                    </View>
                    <View style={{width:width, height:.5,backgroundColor:'#dddddd'}}/>

                    <Text numberOfLines={100} style={styles.detaiTitleStyle}>{this.state.gameItemData.remark}</Text>

                    <View style={{width:width, height:width/8}}/>

                </ScrollView>



                <TouchableOpacity activeOpacity={1} onPress={this.goPlayGame.bind(this)}>
                    <LinearGradient colors={['#fe7133','#ff4114']} style={styles.linearGradient}>
                        <Text style={{color:'#fdfdfd',fontSize:14}}>立即体验</Text>
                    </LinearGradient>
                </TouchableOpacity>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'white'
    },
    bgViewStyle: {
        height:width/3,
        backgroundColor:'white',
        alignItems:'center'
    },
    detaiTitleStyle:{
        fontSize:13,
        color:'#909090',
        margin:15,
        marginLeft:20
    },
    imageHeadViewStyle:{
        justifyContent:'center',
        alignItems:'center',
        height:width/2,
        marginBottom:20
    },
    imageHeadStyle:{
        width:width,
        height:width/3
    },
    titleViewStyle:{
        height:50,
        justifyContent:'center',
        alignItems:'center'
    },
    linearGradient: {
        justifyContent:'center',
        alignItems:'center',
        height:width/8,
        marginLeft:0.56*40,
        marginRight:0.56*40,
        marginBottom:30,
        backgroundColor:'yellow',
        borderRadius:0.56*20
    },
    titleStyle:{
        fontSize:15,
        color:'#333333',
        margin:10
    },
    itemViewStyle:{
        width:(width-70)/3,
        marginLeft:12,
        justifyContent:'center',
        alignItems:'center',
        // borderRadius:5,
        borderWidth:.5,
        // borderColor:'red',
        // shadowColor:'blue'
    },
    imageStyle:{
        width:(width-70)/3-10,
        height:(width-70)/3-10
    },
});
